<template>
  <div>
    <!--导航区域：Message二级路由的导航区域  -->
    <ul>
      <li>
        <router-link to="/home/message/detail?a=88&b=哈哈哈"
          >声明式导航链接:query参数</router-link
        >
      </li>
      <li>
        <router-link to="/home/message/detail/8888/懒洋洋"
          >声明式导航链接:params参数</router-link
        >
      </li>
      <li>
        <router-link to="/home/message/detail/88888/易烊千玺?a=828&b=lmy"
          >声明式导航链接:即传递params参数，有传递query参数</router-link
        >
      </li>
    </ul>

    <hr />
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <button @click="goDetial(item)">编程式导航{{ item.a }}</button>
      </li>
    </ul>

    <!-- 展示区域:展示Message二级路由的子路由地方 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, a: "扁鹊", b: "法师" },
        { id: 2, a: "安琪拉", b: "法师" },
        { id: 3, a: "王昭君", b: "法师" },
        { id: 4, a: "貂蝉", b: "法师" },
      ],
    };
  },
  methods: {
    goDetial(item) {
      //可以通过VC的$router[路由器],实现路由的跳转!!!
      //VC身上的$router属性,实质它的属性值即为VueRouter类的实例。
      //VueRouter.prototype原型对象的身上有push|replace方法，他们可以实现路由的跳转！！

    //   编程式导航：跳转到Detail
    // 编程式导航：第一种写法   【纯纯的字符串写法,这种写法以后不会用了】  query|params参数都可以
    // this.$router.push('/home/message/detail?a='+item.a+'&b='+item.b)



      //编程式导航：第二种写法【不常用】,模板字符串写法 
    // this.$router.push(`/home/message/detail?a=${item.a}&b=${item.b}`)


      //编程式导航：第三种写法=>对象写法【很重要:上面两种写法你可以忘记】
       //书写配置对象
      //传递query参数:path:设置的跳转路径  query
    //  this.$router.push({path:'/home/message/detail',query:{a:item.a,b:item.b}})

    // 编程式导航：第四种写法=> 传递params参数:两个P犯相【不行】!!!!
      //编程式导航：路由跳转传递params参数，务必给路由命名【2个P犯相】
    this.$router.replace({name:'yyqx',params:{id:item.a,name:item.b}})




    // 传递query  传递params
    // 书写逻辑的
    if(item.id > 1){
        this.$router.push({
            name:'yyqx',
            query:{a:1,b:2},
            params:{id:4,name:5}
        })
    }

    


    },
  },
};
</script>

<style scoped>
button{
    margin: 10px 0;
}

</style>